<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title></title>
{php echo register_jssdk(false);}
<script src="{MODULE_URL}template/mobile/js/jquery-2.1.1.min.js?v={TIMESTAMP}"></script>
<style>
* {
	padding: 0;
	margin: 0;
}
a {
	outline: medium;
}
canvas {
	vertical-align: top;
}
#finger {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	z-index: 100;
	display: none;
}
#finger span {
	display: block;
	float: left;
	height: 100%;
	width: 50%;
	-webkit-box-sizing: border-box;
}
#finger span#finger-left.on {
	background: url("{MODULE_URL}template/mobile/img/game.png") 50% 0% / 225px 245px no-repeat;
}
#finger span#finger-right.on {
	background: url("{MODULE_URL}template/mobile/img/game.png") 50% -100px / 225px 245px no-repeat;
}
#finger #start {
	width: 100%;
	height: 100%;
	background-color: transparent;
	position: absolute;
	left: 0;
	top: 0;
}
.g-pace {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 15%;
	padding: 0 3px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box
}
.g-pace dd, .g-pace dt {
	position: relative;
	float: left;
	width: 50%;
	height: 100%;
	padding: 10px 3px;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-box-sizing: border-box
}
.g-pace dt {
	padding-right: 5px
}
.g-pace dd {
	padding-left: 5px
}
.g-pace a {
	display: block;
	height: 100%;
	background: #ffba15 url({MODULE_URL}template/mobile/img/foot.png) no-repeat center;
	background-size: 22px 43px;
	border: 3px solid #fff;
	border-radius: 3px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box
}
.g-pace dt a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-transform: skew(3deg, 0deg)
}
.g-pace dd a {
	background-color: #3088e2;
	-moz-transform: scaleX(-1) skew(3deg, 0deg);
	-webkit-transform: scaleX(-1) skew(3deg, 0deg);
	-o-transform: scaleX(-1) skew(3deg, 0deg);
	transform: scaleX(-1) skew(3deg, 0deg);
	filter: FlipH
}
.g-pace dd a.sel, .g-pace dt a.sel {
	background-color: #8a8a8a
}
#ready {
	display: none;
	position: fixed;
	top: 10%;
	left: 0;
	width: 100%;
	height: 30px;
	padding-top: 50px;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	color: #ff522e;
	text-align: center;
	text-shadow: #fff 1px 1px, #fff 1px -1px, #fff -1px 1px, #fff -1px -1px;
	background: url({MODULE_URL}template/mobile/img/game.png) 50% -200px / 225px 245px no-repeat;
}
#score {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	color: #ff522e;
	text-align: center;
	text-shadow: #fff 1px 1px, #fff 1px -1px, #fff -1px 1px, #fff -1px -1px;
}
#second {
	display: none;
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -80px;
	font-size: 49px;
	color: #1d81b0;
	font-weight: 700;
	text-shadow: #fff 3px 3px, #fff 3px -3px, #fff -3px 3px, #fff -3px -3px;
	width: 160px;
	text-align: center;
}
#g-voiceover {
	text-align: center;
	width: 100%;
	height: 100px;
	font-size: 18px;
	color: #1d81b0;
	font-weight: 700;
	-shadow: #fff 1px 1px, #fff 1px -1px, #fff -1px 1px, #fff -1px -1px;
}
#g-music {
	position: fixed;
	right: 10px;
	top: 10px;
	width: 25px;
	height: 25px;
}
.g-musicon {
	background: url(../addons/j_run/template/mobile/img/music.png);
	background-size: 100% 100%;
}
</style>
</head><body>
<input type="hidden" id="runremurl" value ="{php echo $_W['siteroot'].str_replace('./','app/',$this->createMobileUrl('ajax',array('uid'=>$uid,'op'=>'submitmark','rid' => $rid,'fid'=>$fid)))}" />
<input type="hidden" id="spkeindex" value ="{php echo $_W['siteroot'].str_replace('./','app/',$this->createMobileUrl('index',array('rid' => $rid,'openid'=>$openid,'fid'=>$fid,'add'=>1)))}" />
<input type="hidden" id="fid" value ="{php echo $fid}" />
<input type="hidden" id="shareurl" value="{php echo  $_W['siteroot'].str_replace('./','app/',$this->createMobileUrl('share',array('rid' => $rid,'openid'=>$openid,'fid'=>$fid)))}"/>
<div id="game">
  <div id="g-music" class="g-musicon">
    <audio id="music" src="{if $item['$item']}{$item['$item']}{else}../addons/j_run/template/mobile/img/2.mp3{/if}"  loop ></audio>
  </div>
  <canvas id="gameCanvas"></canvas>
  <div id="ready">点击踏板开始游戏</div>
  <dl class="g-pace">
    <dt> <a id="pace-left" href="javascript:void(0);"></a> </dt>
    <dd> <a id="pace-right" href="javascript:void(0);"></a> </dd>
  </dl>
  <div id="finger"> <span id="finger-left"></span> <span id="finger-right"></span>
    <div id="start"></div>
  </div>
  <div id="second"> <span>{php echo intval($item['gametime'])? intval($item['gametime']):10}s</span>
    <div id="g-voiceover">别发呆了起来嗨！</div>
  </div>
  <div id="score"> <span>0m</span> </div>
</div>
<div id="timelineGuid" onClick="showSelfInfo();" style="display:none;position:fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2000; background: rgba(0, 0, 0, 0.701961);"> <img src="../addons/j_run/template/mobile/img/guide.png" style="position: fixed; right: 18px; top: 5px; width: 260px; height: 180px; z-index: 2001;"> </div>
</body>
<script>
var gameConfig={
	fontarr:['{php echo $slogan}'],
	img_loadImg:"{if strpos($item['img_loadImg'],'addons')!=3}{$_W['attachurl']}{/if}{$item['img_loadImg']}",
	img_personImg:"{php echo $personl_stand}",
	img_personsImg:"{php echo $personl_run}",
	img_treeImage:"{if strpos($item['img_treeImage'],'addons')!=3}{$_W['attachurl']}{/if}{$item['img_treeImage']}",
	img_green:"{if strpos($item['img_green'],'addons')!=3}{$_W['attachurl']}{/if}{$item['img_green']}",
	img_road:"{if strpos($item['img_road'],'addons')!=3}{$_W['attachurl']}{/if}{$item['img_road']}",
	img_sun:"{if strpos($item['img_sun'],'addons')!=3}{$_W['attachurl']}{/if}{$item['img_sun']}",
	img_cloud1:"{if strpos($item['img_cloud1'],'addons')!=3}{$_W['attachurl']}{/if}{$item['img_cloud1']}",
	img_cloud2:"{if strpos($item['img_cloud2'],'addons')!=3}{$_W['attachurl']}{/if}{$item['img_cloud2']}",
	img_cloud3:"{if strpos($item['img_cloud3'],'addons')!=3}{$_W['attachurl']}{/if}{$item['img_cloud3']}",
	img_fullbg:"{if $item['img_fullbg']}{$_W['attachurl']}{$item['img_fullbg']}{else}../addons/j_run/template/mobile/img/bank.png{/if}",
	img_treeImage_road:"../addons/j_run/template/mobile/img/tree3.png",
	is_showfullbg:parseInt("{$item['open_bg']}"),
	modol:parseInt("{$item['modol']}"),
	speed:parseFloat("{$item['speed']}"),
	speedStep:parseFloat("{$item['speedStep']}"),
	isself:parseInt("{php echo $status}"),
	share_title:"{php echo $item['title']}",
	share_desc:"{php echo $share_des}",
	share_link:"{php echo $_W['siteroot'].str_replace('./','app/',$this->createMobileurl('share',array('rid' => $rid,'fid'=>$fans['id'])))}",
	share_img:"{php echo $_W['attachurl'].$item['thumb_share']}",
}
</script>
<script src="{MODULE_URL}template/mobile/js/game.js?v={TIMESTAMP}"></script>
<link type="text/css" rel="stylesheet" href="{MODULE_URL}template/mobile/js/sweetalert.css"/>
<script src="{MODULE_URL}template/mobile/js/sweetalert.min.js"></script>
<script type="text/javascript">
var reurl =$("#spkeindex").val();
var shareurl =$("#shareurl").val();
var share_oldtital="{php echo $item['share_title']}";
window.shareData = {
	temptitle:"{php echo $item['title']}",
	title: "{php echo $item['title']}",
	desc: "{php echo $share_des}",
	link: "{php echo $_W['siteroot'].str_replace('./','app/',$this->createMobileurl('share',array('rid' => $rid,'fid'=>$fans['id'])))}",
	imgUrl: "{php echo $_W['attachurl'].$item['thumb_share']}",
	success: function () {}
};
$(function(){
	var i = 0;
	$('#g-music').bind('click',function(){
		i++;
		if(i == 1){
			$('#music')[0].pause();
		}else if(i == 2){
			$('#music')[0].play();
			i = 0;
		}
	})
	/*$('#timelineGuid').bind('click',function(){
		  window.location.href=reurl;
	})*/
				
	wx.ready(function () {
		var menuitem=['menuItem:profile','menuItem:share:email','menuItem:openWithSafari','menuItem:openWithQQBrowser','menuItem:readMode','menuItem:copyUrl','menuItem:share:qq','menuItem:share:weiboApp','menuItem:share:QZone','menuItem:favorite','menuItem:copyUrl','menuItem:originPage','menuItem:delete','menuItem:editTag','menuItem:exposeArticle','menuItem:setFont','menuItem:dayMode','menuItem:nightMode','menuItem:refresh'];
		if(gameConfig.isself){
			wx.hideOptionMenu();
		}else{
			wx.hideMenuItems({
				 menuList: menuitem
			});
			wx.onMenuShareTimeline(window.shareData);
			wx.onMenuShareAppMessage(window.shareData);
		}
	});
	wx.error(function(res){
		wx.hideOptionMenu();
	})
});

function dp_submitScore(countMeter){
	document.title = share_oldtital.replace("|#成绩#|", parseInt(countMeter));    
	window.shareData.desc = document.title;
	wx.onMenuShareTimeline({
		title: window.shareData.desc, // 分享标题
		link: window.shareData.link, // 分享链接
		imgUrl: window.shareData.imgUrl, // 分享图标
		success: function () {},
		cancel: function () {}
	});
	wx.onMenuShareAppMessage(window.shareData);
}

function showInfo(){
	swal({
		title:"提示",
		text:'您已经成功帮助{$owner["nickname"]}完成一段了，Ta离奖品又近了一步。<br>您也可以参加此游戏，和好友一同赢取大奖！',
		html:true,
		showCancelButton: true,
		confirmButtonColor: "#DD6B55",
		confirmButtonText: "我也参加", 
		cancelButtonText: "关闭",
		animation:"slide-from-top",
		closeOnConfirm: false,
		closeOnCancel: false 
	},
		function(isConfirm){ 
			if (isConfirm) { 
				window.location.href=reurl;
			} else {
				window.location.href=shareurl;
			} 
		}
	);
}
function showSelfInfo(){
	$("#timelineGuid").hide();
	swal({
		title:"提示",
		text:'还差一点还差一点，快邀请好友接力，助您赢取丰厚大奖吧！',
		html:true,
		showCancelButton: true,
		confirmButtonColor: "#DD6B55",   
		confirmButtonText: "邀请好友", 
		cancelButtonText: "关闭", 
		animation:"slide-from-top",
		closeOnConfirm: false,  
		closeOnCancel: false },
		function(isConfirm){ 
			if (isConfirm) {
				$("#timelineGuid").show();
				swal.close();
			} else {
				window.location.href=reurl;
			} 
		}
	);
}
</script>
</html>